<template>
	<view style="background: #f5f5f5;">
		<view class="head-box">
			<image src="/static/img/index/LOGO.png" style="width: 190rpx; height: 78rpx;"></image>
			<view class="language-box" @click="switchLanguage">
				<text>切换</text>
				<image src="/static/img/index/language.png" style="width: 38rpx; height: 30rpx;"></image>
			</view>
		</view>
		<view class="data-box">
			<view class="item">
				<view class="label">{{$t("index.bot")}}</view>
				<view class="number">{{Number(robot.robotNum || 0)}}</view>
			</view>
			<view class="item">
				<view class="label">{{$t("index.dayProfit")}}(XTTA)</view>
				<view class="number">{{Number(robot.dayProfit || 0).toFixed(4)}}</view>
			</view>
			<view class="item">
				<view class="label">{{$t("index.sumProfit")}}(XTTA)</view>
				<view class="number">{{Number(robot.sumProfit || 0).toFixed(4)}}</view>
			</view>
		</view>

		<view class="invite-box" @click="share">
			<view class="l-box">
				<view class="des">{{$t("index.shareTitle")}}</view>
				<view class="btn-box">
					{{$t("index.share")}}
				</view>
			</view>
			<view class="r-box">
				<image src="../../static/img/index/pic.png" style="width: 95rpx; height: 150rpx;"></image>
			</view>
		</view>

		<view class="about-box">
			<view class="item">
				<image src="../../static/img/index/i-1.png" style="width: 125rpx; height: 125rpx;"></image>
				<view class="title">
					{{$t("index.about1")}}
				</view>
			</view>
			<view class="item">
				<image src="../../static/img/index/i-2.png" style="width: 125rpx; height: 125rpx;"></image>
				<view class="title">
					{{$t("index.about2")}}
				</view>
			</view>
			<view class="item">
				<image src="../../static/img/index/i-3.png" style="width: 125rpx; height: 125rpx;"></image>
				<view class="title">
					{{$t("index.about3")}}
				</view>
			</view>
			<view class="item">
				<image src="../../static/img/index/i-4.png" style="width: 125rpx; height: 125rpx;"></image>
				<view class="title">
					{{$t("index.about4")}}
				</view>
			</view>
		</view>

		<view class="main-stream">
			<view class="title">
				{{$t("index.stream")}}
			</view>
			<view class="table-box">
				<view class="title-box">
					<text>{{$t("index.name")}}</text>
					<text>{{$t("index.newPrice")}}</text>
					<text>{{$t("index.fl")}}</text>
				</view>
				<view class="item" v-if="stream">
					<view class="logo-box">
						<image src="../../static/img/index/AVAX.png" style="width: 64rpx;height: 64rpx;"></image>
						<view>
							<view>WNA/USDC</view>
							<view>Wna</view>
						</view>
					</view>
					<view class="price-box">
						<text>{{stream.price ? Number(stream.price).toFixed(4) : '0.00'}}</text>
						<!-- <text>￥5610.21万</text> -->
					</view>
					
					<view class="btn-box">
						<text :style="{'backgroundColor': negative == 0 ? '#f5f5f5' : negative > 0 ? '#3CD37B' : '#EF3C2D'}"><text v-if="negative">{{negative > 0 ? '+' : '-'}}</text>{{Number(stream.fl || 0).toFixed(4)}}%</text>
					</view>
				</view>
				<!-- <view class="item">
					<view class="logo-box">
						<image src="../../static/img/index/aave.png" style="width: 64rpx;height: 64rpx;"></image>
						<view>
							<view>AAVE/USD</view>
							<view>Aave</view>
						</view>
					</view>
					<view class="price-box">
						<text>71,098.6</text>
						<text>￥5610.21万</text>
					</view>
					<view class="btn-box">
						<text>+19.17%</text>
					</view>
				</view> -->
				<!-- <view class="item">
					<view class="logo-box">
						<image src="../../static/img/index/ETH.png" style="width: 64rpx;height: 64rpx;"></image>
						<view>
							<view>ETH/USD</view>
							<view>Aave</view>
						</view>
					</view>
					<view class="price-box">
						<text>71,098.6</text>
						<text>￥5610.21万</text>
					</view>
					<view class="btn-box">
						<text style="background-color: #EF3C2D;">+19.17%</text>
					</view>
				</view> -->
				<!-- <view class="item">
					<view class="logo-box">
						<image src="../../static/img/index/DOGE.png" style="width: 64rpx;height: 64rpx;"></image>
						<view>
							<view>DOGE/USD</view>
							<view>Aave</view>
						</view>
					</view>
					<view class="price-box">
						<text>71,098.6</text>
						<text>￥5610.21万</text>
					</view>
					<view class="btn-box">
						<text>+19.17%</text>
					</view>
				</view> -->
			</view>
		</view>

		<!-- <view class="bottom-box"></view> -->
		<tabbarVue :current="0"></tabbarVue>
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		useI18n
	} from 'vue-i18n';
	import {
		register,
		getUserInfo,
		getIndex,
		queryRobotProfit
	} from '@/common/api/common.js'
	const {
		t,
		locale
	} = useI18n();

	const invateCode = ref('')
	const address = ref('')
	const token = ref('')
	const userInfo = ref({})
	const stream = ref({})
	const robot = ref({})
	

	const switchLanguage = () => {
		locale.value = locale.value == 'zh-Hant' ? 'en' : 'zh-Hant'
		uni.setLocale(locale.value == 'en' ? 'en' : 'zh-Hans')
		uni.setStorageSync('lang', locale.value);
	}
	
	const share = () => {
		let url = window.origin + '?invateCode=' + userInfo.value.invateCode
		uni.setClipboardData({
			data: url,
			success: function () {
				uni.$u.toast(t("index.shareTel"))
			}
		});
	}
	
	const getUserInfoFn = async () => {
		const res = await getUserInfo({
			address: address.value
		})
		if (res.status == 0) {
			if(res.result.parent) {
				invateCode.value = res.result.parent.invateCode
			}
			if(res.result.member) {
				userInfo.value = res.result.member
			}
			if(!res.result.member || !token.value) {
				registerFn();
			}
		} else {
			// uni.$u.toast(res.errorMessage)
		}
	}

	const registerFn = async () => {
		const res = await register({
			address: address.value,
			invateCode: invateCode.value
		})
		if (res.status == 0) {
			token.value = res.result.token
			uni.setStorageSync('token', res.result.token)
			getUserInfoFn();
			getIndexFn();
			queryRobotProfitFn();
		} else {
			// uni.$u.toast(res.errorMessage)
		}
	}
	
	const getIndexFn = async () => {
		const res = await getIndex()
		if (res.status == 0) {
			stream.value = res.result
		} else {
			// uni.$u.toast(res.errorMessage)
		}
	}
	
	const queryRobotProfitFn = async () => {
		const res = await queryRobotProfit()
		if (res.status == 0) {
			robot.value = res.result
			// stream.value = res.result
		} else {
			// uni.$u.toast(res.errorMessage)
		}
		uni.stopPullDownRefresh()
	}
	
	
	const negative = computed(() => {
	  return Number(stream.close) - Number(stream.open)
	});
	
	onPullDownRefresh(()=>{
		getIndexFn();
		queryRobotProfitFn();
	})
	
	onLoad(async(options) => {
		if(options.invateCode) {
			invateCode.value = options.invateCode
		}
		if (!window.ethereum) {
			alert(t("index.ethereum"));
			return;
		}
		await window.ethereum.request({
			method: "eth_requestAccounts",
		}).then(res => {
			address.value = res[0];
			uni.setStorageSync('address', res[0]);
			if(address.value) {
				registerFn()
				// getUserInfoFn()
			}
		})
		// address.value = uni.getStorageSync('address');
		// token.value = uni.getStorageSync('token');
	})

	onShow(() => {
		getIndexFn();
		queryRobotProfitFn();
	})
</script>

<style lang="scss" scoped>
	.head-box {
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.language-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			text {
				font-size: 24rpx;
				padding-right: 10rpx;
				color: #1F1F1F;
			}
		}
	}

	.data-box {
		width: calc(100vw - 80rpx);
		height: 148rpx;
		margin: 0 auto;
		background-image: url('../../static/img/bot/l-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;

		.item {
			color: #ffffff;

			.label {
				font-size: 24rpx;
			}

			.number {
				font-size: 42rpx;
				font-weight: 500;
			}
		}

		.item:nth-child(2) {
			text-align: center;
		}

		.item:nth-child(3) {
			text-align: right;
		}
	}

	.invite-box {
		width: calc(100vw - 80rpx);
		margin: 20rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 16rpx;

		.l-box {
			width: 60%;
			padding: 30rpx 0;

			.des {
				font-size: 26rpx;
			}

			.btn-box {
				width: 120rpx;
				height: 36rpx;
				color: #ffffff;
				font-size: 20rpx;
				background-color: #1C5FFF;
				border-radius: 36rpx;
				text-align: center;
				line-height: 36rpx;
				margin-top: 10rpx;
			}
		}
	}

	.about-box {
		width: calc(100vw - 80rpx);
		margin: 20rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 40rpx 44rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 16rpx;

		.item {
			.title {
				padding-top: 10rpx;
				text-align: center;
				font-size: 24rpx;
			}
		}
	}

	.main-stream {
		width: 100vw;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		background: #ffffff;
		margin-top: 20rpx;
		min-height: 800rpx;

		.title {
			padding: 40rpx 40rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			color: #1F1F1F;
		}

		.table-box {
			width: calc(100% - 80rpx);
			margin: 0 auto;
			// background-color: #262930;
			border-radius: 16rpx;

			.title-box {
				height: 80rpx;
				border-bottom: 1rpx dashed #f6f6f6;
				box-sizing: border-box;
				line-height: 80rpx;
				font-weight: 500;
				font-size: 24px;
				color: #1F1F1F;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;

				text {
					width: 33.33%;
					text-align: center;
				}

				text:nth-child(1) {
					text-align: left;
				}

				text:nth-child(2) {
					text-align: right;
				}

				text:nth-child(3) {
					text-align: right;
				}
			}

			.item {
				padding: 10rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #111111;
				font-size: 20rpx;
				margin-bottom: 20rpx;

				view {
					width: 33.33%;
					text-align: center;
				}

				.logo-box {
					view {
						margin-left: 10rpx;

						view:nth-child(1) {
							font-weight: bold;
							font-size: 32rpx;
							color: #1F1F1F;
						}

						view:nth-child(2) {
							font-weight: 400;
							font-size: 24rpx;
							color: #1F1F1F;
						}
					}
				}

				.price-box {
					text {
						display: block;
						text-align: right;
					}

					text:nth-child(1) {
						font-weight: bold;
						font-size: 32rpx;
						color: #1F1F1F;
					}

					text:nth-child(2) {
						font-weight: 400;
						font-size: 24rpx;
						color: #1F1F1F;
					}
				}

				.btn-box {
					text {
						padding: 4rpx 10rpx;
						border-radius: 8rpx;
						background-color: #3CD37B;
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
					}
				}

				view:nth-child(1) {
					text-align: left;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					text {
						display: block;
					}
				}

				view:nth-child(3) {
					text-align: right;
				}
			}
		}
	}
</style>